<template>
  <div class="attendance-statistics">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>考勤统计</span>
          <div class="header-actions">
            <el-button type="primary" @click="exportData">
              导出数据
            </el-button>
          </div>
        </div>
      </template>

      <!-- 统计筛选 -->
      <div class="filter-section">
        <el-form :inline="true" :model="filterForm">
          <el-form-item label="统计时间">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="dateShortcuts"
              value-format="YYYY-MM-DD"
              @change="handleDateChange"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 统计卡片 -->
      <div class="statistics-cards">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card shadow="hover">
              <template #header>
                <div class="stat-header">
                  <span>出勤天数</span>
                </div>
              </template>
              <div class="stat-number">{{ statistics.attendanceDays }}</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <template #header>
                <div class="stat-header">
                  <span>迟到次数</span>
                </div>
              </template>
              <div class="stat-number warning">{{ statistics.lateDays }}</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <template #header>
                <div class="stat-header">
                  <span>早退次数</span>
                </div>
              </template>
              <div class="stat-number warning">{{ statistics.earlyDays }}</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <template #header>
                <div class="stat-header">
                  <span>缺勤天数</span>
                </div>
              </template>
              <div class="stat-number danger">{{ statistics.absentDays }}</div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 考勤详情表格 -->
      <div class="attendance-table">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column prop="date" label="日期" sortable width="120" />
          <el-table-column prop="checkIn" label="上班打卡" width="180" />
          <el-table-column prop="checkOut" label="下班打卡" width="180" />
          <el-table-column prop="status" label="考勤状态" width="120">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="duration" label="工作时长" width="120" />
          <el-table-column prop="remark" label="备注" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx'

// 筛选表单
const filterForm = reactive({
  dateRange: []
})

// 统计数据
const statistics = reactive({
  attendanceDays: 22,
  lateDays: 2,
  earlyDays: 1,
  absentDays: 1
})

// 表格数据
const tableData = ref([
  {
    date: '2024-03-26',
    checkIn: '09:00:00',
    checkOut: '18:00:00',
    status: '正常',
    duration: '9小时',
    remark: ''
  },
  {
    date: '2024-03-25',
    checkIn: '09:15:00',
    checkOut: '18:00:00',
    status: '迟到',
    duration: '8小时45分',
    remark: '迟到15分钟'
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  }
]

// 获取状态对应的类型
const getStatusType = (status) => {
  const typeMap = {
    '正常': 'success',
    '迟到': 'warning',
    '早退': 'warning',
    '缺勤': 'danger'
  }
  return typeMap[status] || 'info'
}

// 日期变化处理
const handleDateChange = (val) => {
  console.log('选择的日期范围：', val)
}

// 搜索处理
const handleSearch = () => {
  console.log('搜索条件：', filterForm)
}

// 重置筛选
const resetFilter = () => {
  filterForm.dateRange = []
}

// 导出数据
const exportData = () => {
  // 准备导出数据
  const exportData = tableData.value.map(item => ({
    '日期': item.date,
    '上班打卡': item.checkIn,
    '下班打卡': item.checkOut,
    '考勤状态': item.status,
    '工作时长': item.duration,
    '备注': item.remark
  }))

  // 创建工作簿
  const wb = XLSX.utils.book_new()
  const ws = XLSX.utils.json_to_sheet(exportData)
  XLSX.utils.book_append_sheet(wb, ws, '考勤统计')

  // 导出文件
  XLSX.writeFile(wb, '考勤统计.xlsx')
  ElMessage.success('导出成功')
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped lang="scss">
.attendance-statistics {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .filter-section {
    margin-bottom: 20px;
  }

  .statistics-cards {
    margin-bottom: 30px;

    .stat-header {
      font-size: 14px;
      color: #606266;
    }

    .stat-number {
      font-size: 24px;
      font-weight: bold;
      color: #409EFF;
      text-align: center;
      margin-top: 10px;

      &.warning {
        color: #E6A23C;
      }

      &.danger {
        color: #F56C6C;
      }
    }
  }

  .attendance-table {
    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style> 